import React, { useEffect } from 'react'
import counter from '../../store/counter'
// import store from '../../store'
import {observer} from 'mobx-react'
import {autorun, reaction} from 'mobx'

function CounterShow() {


  useEffect(() => {
    autorun(() => { // 初始执行一次 / 依赖数据发生变化时再执行
      console.log('autorun 回调', counter.count)
    })

    reaction(
      () => counter.count,
      (newValue, oldValue) => { // 初始时不调用，当第一个函数返回值发生改变时才调用
        console.log('count变化了', newValue, oldValue);
      }
    )
  }, [])

  // const {count} = store.getState()
  return (
    <h2>点击的次数: {counter.count}, count为：{counter.oddOrEven}, count为：{counter.oddOrEven}</h2>
  )
}

export default observer(CounterShow)


/* 
高阶组件：
  本质是函数： 接收的参数是组件函数， 返回值是一个新的组件函数


  function observer (Comp) {
    return function () {
      if () {
        return <div>loading<div>
      }
      return <Comp xxx="abc"/>
    }
  }

  export default observer(CounterShow)
*/